<template>
	<a-drawer
		:title="formData.id ? '编辑' : '增加'"
		:width="600"
		:visible="visible"
		:destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item label="柜子管理员：" name="cabinetAdminUserNames">
						<a-tag color="orange" v-for="(item, index) in cabinetAdminUserNames" :key="index">
							{{ item }}
						</a-tag>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="柜门管理员：" name="adminUserIds">
						<a-button type="link" size="small" @click="openSelector">选择</a-button>
						<a-tag color="orange" v-for="item in selectedAdminUsers" :key="item.id">
							{{ item.name }}
						</a-tag>
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item label="权限最大天数(不填则无限制)：" name="maxPermDays">
						<a-input-number
							v-model:value="formData.maxPermDays"
							placeholder="请输入权限最大天数"
							addon-after="天"
							:precision="0"
							:min="0"
							allow-clear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item
						label="是否独立权限："
						name="separatedPermission"
						title="权限独立是指不继承柜子和组柜的人员授权数据，即柜子和组柜对用户授予的权限，无法打开本柜门，只有单独针对本柜门进行授权的用户才能打开柜门。"
					>
						<a-switch v-model:checked="formData.separatedPermission" checked-children="是" un-checked-children="否" />
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="是否独立设置盘库周期：" name="makingInventoryConfigSeparated">
						<a-radio-group v-model:value="formData.makingInventoryConfigSeparated" button-style="solid">
							<a-radio-button :value="false">继承自柜子</a-radio-button>
							<a-radio-button :value="true">独立设置</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item label="盘库周期单位：" name="makingInventoryUnit">
						<a-select
							v-model:value="formData.makingInventoryUnit"
							placeholder="请选择盘库周期类型"
							:options="makingInventoryUnitOptions"
							allow-clear
							:disabled="!formData.makingInventoryConfigSeparated"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="盘库周期：" name="makingInventoryCycle">
						<a-input-number
							v-model:value="formData.makingInventoryCycle"
							placeholder="请输入盘库周期"
							:addon-after="['天', '小时'][formData.makingInventoryUnit]"
							:precision="0"
							:min="1"
							allow-clear
							:disabled="
								!formData.makingInventoryConfigSeparated ||
								(formData.makingInventoryUnit !== 0 && formData.makingInventoryUnit !== 1)
							"
						/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>

		<admin-user-selector-plus
			ref="AdminUserSelectorPlus"
			page-url="/sys/role/userSelectorForRole"
			role-no="cabAdmin"
			@onBack="afterSelectUser"
		/>
	</a-drawer>
</template>

<script setup name="bizCabinetDoorForm">
	import adminUserSelectorPlus from '@/components/Selector/adminUserSelectorPlus.vue'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import bizCabinetDoorApi from '@/api/biz/bizCabinetDoorApi'

	const selectedAdminUsers = ref([])
	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const submitLoading = ref(false)
	let AdminUserSelectorPlus = ref()
	let cabinetAdminUserNames = ref([])

	const makingInventoryUnitOptions = ref([
		{
			label: '按天',
			value: 0
		},
		{
			label: '按小时',
			value: 1
		}
	])

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
			console.log(recordData)
			cabinetAdminUserNames.value = recordData.cabinetAdminUserNames.split(',')
			if (recordData.adminUserIds && recordData.adminUserNames) {
				let adminUserNames = recordData.adminUserNames.split(',')
				recordData.adminUserIds.split(',').forEach((userId, index) => {
					selectedAdminUsers.value.push({
						id: userId,
						name: adminUserNames[index]
					})
				})
			}
		}
	}
	// 打开人员选择器，选择主管
	const openSelector = () => {
		let userIds = selectedAdminUsers.value.map((user) => user.id)
		AdminUserSelectorPlus.value.showUserPlusModal(userIds)
	}
	// 人员选择器回调
	const afterSelectUser = (value) => {
		selectedAdminUsers.value = value
		formData.value.adminUserIds = value.map((item) => item.id).join(',')
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		selectedAdminUsers.value = []
		visible.value = false
	}
	// 默认要校验的
	const formRules = {
		adminUserIds: [required('请选择管理员')],
		makingInventoryUnit: [required('请选择盘库周期单位')],
		makingInventoryCycle: [required('请选择盘库周期')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			bizCabinetDoorApi
				.bizCabinetDoorSubmitForm(formDataParam, !formDataParam.id)
				.then(() => {
					onClose()
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
